<template>
  <div class="cart py-container">
    <!--主内容-->
    <div class="checkout py-container  pay">
      <div class="checkout-tit">
        <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：{{payObj.out_trade_no}}</span>
        </h4>
        <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{payObj.total_fee}}</em></span>
        <div class="clearfix"></div>
      </div>
      <div class="checkout-steps">
        <div class="fl weixin" style="vertical-align: middle;">微信支付
          <svg style="vertical-align: middle;" t="1664792620616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1179" width="32" height="32"><path d="M512 936.96a30.5408 30.5408 0 0 1-13.68576-3.23584c-35.08224-17.57696-342.78912-175.90272-342.78912-320.64 0-128-12.03712-392.03328-12.16512-394.68544a30.40768 30.40768 0 0 1 21.81632-30.53568l338.18624-99.57888a30.62272 30.62272 0 0 1 17.26464 0l338.18112 99.57376A30.3872 30.3872 0 0 1 880.64 218.3168c-0.11776 2.816-12.16 282.48064-12.16 394.752 0 159.40096-308.5824 305.03424-343.77216 321.11104A30.54592 30.54592 0 0 1 512 936.96zM205.312 239.42144c2.96448 68.3776 11.16672 267.136 11.16672 373.66272 0 78.26944 176.3072 197.52448 296.09472 259.64544 119.3984-57.04704 294.912-172.032 294.912-259.64544 0-94.11072 8.30464-303.13472 11.21792-373.64736L512 149.12z" fill="#04BE02" p-id="1180"></path><path d="M472.22784 632.12544l-132.096-127.11424 42.22976-43.7504 90.3168 86.91712 166.45632-156.70784 41.74336 44.21632z" fill="#04BE02" p-id="1181"></path></svg>
        </div>
        <div class="fl sao">

          <div class="fl code">
            <qriously :value="String(payObj.code_url)" :size="250"/>
            <div >
              <p class="red">请使用微信扫一扫，扫描二维码进行支付</p>
            </div>

          </div>

        </div>
        <div class="clearfix"></div>

      </div>
    </div>
  </div>
</template>

<script>
  import ordersApi from '@/api/orders'
  export default {
    asyncData({params, error}) {
      return {pid: params.pid}
    },
    data() {
      return {
        timer: '',
        payObj: {}
      }
    },
    //每隔三秒调用一次查询订单状态的方法
    mounted() {
      this.timer = setInterval(() => {
        this.queryOrderStatus(this.payObj.out_trade_no)
      }, 3000);
      this.CreateQRCode()

    },
    methods: {

      // 查询订单状态
      queryOrderStatus(orderNo) {
        ordersApi.queryPayStatus(orderNo)
          .then(response => {
            if (response.success) {
              //支付成功，清除定时器
              clearInterval(this.timer)
              //提示
              this.$message({
                type: 'success',
                message: '支付成功!'
              })
              //跳转回到课程详情页面
              this.$router.push({path: '/course/' + this.payObj.course_id})
            }
          })
      },
      // 创建二维码接口调用
      CreateQRCode(){
        ordersApi.createNatvie(this.pid)
          .then(response => {
            this.payObj = response.data
            console.log(this.payObj.course_id)
          })
      }
    }
  }
</script>
